<template>
  <view class="biscuit">
    <view class="biscuit-info">
      <image class="biscuit-bg" :src="ossImg('biscuit/bg.png')" />
      <view class="flex items-center leading-none">
        {{ info.surplusScore }}
        <view class="mall-go" @click="linkTo('/personalPages/biscuit/mall')">
          <image :src="ossImg('biscuit/mall.png')" />
          前往积分商城
        </view>
        <view
          class="biscuit-rule"
          @click="linkTo('/integralPages/integral/rule')"
          >小饼干规则</view
        >
      </view>
      <view class="biscuit-text" v-show="info.expiringScore > 0"
        >有{{ info.expiringScore || 0 }}个小饼干将于本月底过期</view
      >
    </view>
    <view class="biscuit-card">
      <label>小饼干记录</label>
      <view class="biscuit-status">
        <view
          v-for="(item, index) in statusOptions"
          :key="index"
          :class="{ current: item.value === form.type }"
          @click.stop="tabsChange(item.value)"
          >{{ item.label }}</view
        >
      </view>

      <scroll-view
        class="biscuit-records"
        scroll-y="true"
        @scrolltolower="scrollChange"
      >
        <view
          class="biscuit-item"
          v-for="item in listData.data.list"
          :key="item.id"
        >
          <view class="biscuit-label">
            <label class="font-bold"
              ><text> {{ item.description || "购买商品奖励" }}</text>
            </label>
            <view>{{ item.createTime }}</view>
          </view>
          <view class="text-primary font-bold text-16px">
            <text v-if="form.type !== 3">{{
              item.type === "increase" ? "+" : "-"
            }}</text>
            <text v-else> + </text>
            {{ item.score }}</view
          >
        </view>
        <uni-load-more
          class="loadMore"
          v-if="listData.data.list.length !== 0"
          :status="loadingStatus"
          :content-text="contentText"
          @click.stop="scrollChange"
        />
      </scroll-view>
    </view>
  </view>

  
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { filters } from "@/utils/utils";
import {
  GetBiscuitRecords,
  GetProtectionPeriodScore,
} from "@/services/biscuit";
import { ossImg } from "@/utils/utils";
import { ref, reactive } from "vue";
import UniLoadMore from "@/components/uni-load-more/uni-load-more.vue";
import privacyPopup from "@/components/privacy-popup";

const info = reactive({});
const form = reactive({ type: "", pageNum: 1, pageSize: 10 });
const statusOptions = ref([
  { label: "全部", value: "" },
  { label: "收入", value: "increase" },
  { label: "支出", value: "decrease" },
  { label: "即将入账", value: 3 },
]);
const contentText = ref("加载更多");
const loadingStatus = ref("more");

const listData = reactive({
  data: {
    total: 0,
    list: [],
  },
});

onLoad(() => {
  getList();
  getApp().accessLogAdd();
  Object.assign(info, getApp().globalData.user.memberScore);
});

const tabsChange = (val) => {
  form.type = val;
  form.pageNum = 1;
  form.pageSize = 10;
  loadingStatus.value = "more";
  contentText.value = "加载更多";
  if (val !== 3) {
    getList();
  } else {
    GetProtectionPeriodScoreList();
  }
};

const linkTo = (url) => uni.navigateTo({ url });

const getList = async () => {
  const res = await GetBiscuitRecords(form);
  if (res?.code === 200) {
    listData.data = res.data;
    if (listData.data.list.length === listData.data.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    }

    console.log(listData);
  }
};

const GetProtectionPeriodScoreList = async () => {
  const res = await GetProtectionPeriodScore(form);
  if (res?.code === 200) {
    listData.data = res.data;
    if (listData.data.list.length === listData.data.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    }
    console.log(listData);
  }
};

const scrollChange = async (val) => {
  console.log(val);
  if (listData.data.list.length === listData.data.total) return;
  loadingStatus.value = "loading";
  contentText.value = "加载中";
  form.pageNum++;
  const res = await GetBiscuitRecords(form);
  if (res?.code === 200) {
    listData.data.list = listData.data.list.concat(res.data.list);
    if (listData.data.list.length === listData.data.total) {
      loadingStatus.value = "noMore";
      contentText.value = "没有更多";
    } else {
      loadingStatus.value = "more";
      contentText.value = "加载更多";
    }

    console.log(listData);
  }
};
</script>

<style lang="less" scoped>
.biscuit {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.biscuit-card {
  width: calc(100% - 24px);
  margin: -58px auto 0 auto;
  flex: 1;
  background: white;
  position: relative;
  z-index: 2;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  & > label {
    height: 58px;
    font-size: 18px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    font-weight: bold;
    line-height: 1;
    padding-top: 2px;
  }

  .biscuit-status {
    display: flex;
    align-items: center;
    padding: 4px 0 0 0;
    line-height: 1;
    font-size: 14px;
    border-bottom: 1px solid #e5ecf5;
    box-sizing: border-box;
    position: relative;

    > view {
      color: #919191;
      font-size: 14px;
      margin-right: 31px;
      position: relative;
      padding-bottom: 14px;

      &.current {
        color: #000000;

        &::after {
          content: "";
          position: absolute;
          width: 28px;
          height: 4px;
          background: linear-gradient(
            90deg,
            #2a57c2 0%,
            #cad6ec 100%,
            #ffffff 100%,
            #cfd8e4 100%
          );
          left: 50%;
          transform: translate(-50%, 0);
          bottom: 0;
        }
      }
    }
    > view:nth-child(4) {
      position: absolute;
      right: 0;
      margin-right: 0;
    }
  }

  .biscuit-records {
    padding: 25px 0;
    box-sizing: border-box;
    min-height: 360px;
    // height: 360px;
    max-height: 505px;

    .biscuit-item {
      margin-bottom: 28px;
      line-height: 1;
      display: flex;
      justify-content: space-between;

      .biscuit-label {
        color: #282828;
        font-size: 14px;

        view {
          color: #9e9e9e;
          font-size: 12px;
          margin-top: 8px;
        }
      }
    }
    .biscuit-item:last-of-type {
      margin-bottom: 0px;
    }
  }
}

.biscuit-info {
  width: 100%;
  height: 156px;
  background-size: 100% 100%;
  background-position: top left;
  background-repeat: no-repeat;
  padding: 27px 30px 0 30px;
  box-sizing: border-box;
  align-items: flex-start;
  font-size: 30px;
  font-weight: 500;
  color: #ffffff;
  position: relative;

  .biscuit-text {
    font-size: 12px;
    margin-top: 10px;
  }

  .biscuit-bg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
  }

  .mall-go {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 107px;
    height: 28px;
    padding: 0 4px;
    border: 1px solid #fffffa;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    margin-left: 6px;
    box-sizing: border-box;

    image {
      width: 16px;
      height: 16px;
      margin-right: 4px;
    }
  }

  .biscuit-rule {
    width: 70px;
    height: 24px;
    line-height: 24px;
    background: #0058c6;
    border-radius: 12px 0 0 12px;
    padding-left: 10px;
    font-size: 10px;
    position: absolute;
    right: 0;
  }
}
.loadMore {
  text-align: center;
}
</style>
